<template>
  <section>
    <el-container>
      <el-header>
        <el-button @click="addModelDetail" size="mini">新建模板内容</el-button>
      </el-header>
      <el-main>
        <el-table :data="currModel.metadata.detail">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
              <span  v-show="!scope.row.edit">{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码">
            <template slot-scope="scope">
              <el-input v-show="scope.row.edit" size="small" v-model="scope.row.code"></el-input>
              <span  v-show="!scope.row.edit">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
              <el-button @click='cancelBtn(scope.row)' size="small" v-if="scope.row.edit">取消</el-button>
              <el-button @click='del(scope)' size="small" v-if="!scope.row.edit">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-button size="mini" @click='saveModelDetail' type="primary">保存</el-button>
        <el-button size="mini" @click='cancelModelDetail'>取消</el-button>
      </el-footer>
    </el-container>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "modelDetail",
    props: ['currModel'],
    data() {
      return {
        loading:false,
      }
    },
    created(){
      console.log(this.currModel)
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addModelDetail(sel){
        console.log( this.currModel.metadata)
        this.currModel.metadata.detail.push({title:'',code:'',edit:true})
        //新建一个空的，表格页面+1栏
      },
      cancelModelDetail(){
        this.$emit('cancel')
      },
      saveModelDetail(){
        //更新模板
        this.updateReportModule(this.currModel.metadata)
      },
      updateReportModule(metadata){
        this.fetch({name:"updateReportModule",data:{metadata,id:this.currModel.id}})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功'})
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        row.edit= !row.edit
      },
      cancelBtn(row){//取消按钮
        row.edit=false
      },
      del(scope){//删除按钮
        console.log(scope)
        this.$confirm('确认删除？')
          .then(()=> {
            this.currModel.metadata.detail.splice(scope.$index,1)
            this.$message({type:'success',message:'删除成功'})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
    }
  }
</script>

<style scoped>

</style>
